<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-03-25 22:52:21
 * @LastEditTime: 2024-03-28 19:46:08
-->
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { Plus, Delete, Download, Upload } from "@element-plus/icons-vue";
import { ISearchData, ITableData } from "@/axios/setting/icon/types.d";
import ElFormQuote from "@/components/quote/el-form-quote.vue";
import ElDialogFromQuote from "@/components/quote/el-dialog-form-quote.vue";
import ElTableQuote from "@/components/quote/el-table-quote.vue";
import ElDialogDetailsQuote from "@/components/quote/el-dialog-details-quote.vue";
import { IResultPage } from "@/types/index.d";
import { queryApi } from "@/axios/setting/icon/index";

//搜索条件
const searchData = reactive<ISearchData>({
  name: "",
  type: [],
});
//分页返回参数
const pageData = ref<IResultPage<ITableData>>({
  records: [],
});
//form表单
const formData = reactive<any>({
  name: "",
  code: "",
  type: [],
});
const detailsData = reactive({});
const tableData = reactive([{ id: 1, name: "测试", code: "#icon-taiyang" }]);
//弹窗开关
const dialogVisible = ref<boolean>(false);
const detailsVisible = ref<boolean>(false);
/**
 * 搜索方法
 * @param search
 */
const searchSubmit = async (search: ISearchData) => {
  const result = await queryApi(search);
  pageData.value = Object.freeze(result.data);
};
/**
 * 打开dialog弹窗
 */
const openDialog = (id: number | null) => {
  dialogVisible.value = true;
  if (id) {
    //编辑
    console.log("====");
  }
  //新增
};
const handleClose = () => {
  dialogVisible.value = false;
};
const submitChange = (_data: any) => {};

/**
 * 详情
 * @param id
 */
const detailsChange = (_id: number) => {
  detailsVisible.value = true;
};
const handleDetailsClose = () => {
  detailsVisible.value = false;
};
</script>
<template>
  <el-card>
    <!-- 搜索栏 -->
    <el-form-quote
      :search-data="searchData"
      @searchChange="searchSubmit"
      class="hidden-xs"
    >
      <template #default="scope">
        <el-form-item prop="name" :label="$t(`setting.icon.name`)">
          <el-input
            :placeholder="
              $t(`setting.icon.name`, { prefix: $t(`prefix.placeholder`) })
            "
            clearable
            v-model="scope.row.name"
          />
        </el-form-item>
        <!-- select -->
        <el-form-item prop="type" :label="$t(`setting.icon.type`)">
          <el-select-v2
            v-model="scope.row.type"
            :options="[]"
            multiple
            :placeholder="
              $t(`setting.icon.type`, { prefix: $t(`prefix.select`) })
            "
            style="width: 160px"
          />
        </el-form-item>
      </template>
    </el-form-quote>
    <!-- button -->
    <div class="button">
      <el-button type="primary" :icon="Plus" @click="openDialog(null)">
        {{ $t(`button.add`) }}
      </el-button>
      <el-button type="warning" :icon="Upload">
        {{ $t(`button.import`) }}
      </el-button>
      <el-button type="warning" :icon="Download">
        {{ $t(`button.export`) }}
      </el-button>
      <el-button type="danger" :icon="Delete">
        {{ $t(`button.deleteBatch`) }}
      </el-button>
    </div>
    <el-divider />
    <!-- table -->
    <el-table-quote
      :table-data="tableData"
      :editEvent="openDialog"
      :detailsEvent="detailsChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="name"
        :label="$t(`setting.icon.name`)"
        align="center"
      />
      <el-table-column :label="$t(`setting.icon.code`)" align="center">
        <el-table-column
          prop="name"
          :label="$t(`setting.icon.source`)"
          align="center"
        />
        <el-table-column
          prop="code"
          :label="$t(`setting.icon.icon`)"
          align="center"
        >
          <template #default="scope">
            <svg-icon size="30" :icon="scope.row.code"></svg-icon>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="$t(`table.status`)" align="center">
        <template #default="scope">
          <el-check-tag checked type="success">正常</el-check-tag>
        </template>
      </el-table-column>
    </el-table-quote>
  </el-card>

  <!-- add/edit 弹窗 -->
  <el-dialog-form-quote
    :dialog-visible="dialogVisible"
    :form-data="formData"
    @submitChange="submitChange"
    @handleClose="handleClose"
  >
    <template #default="scope">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item prop="name" :label="$t(`setting.icon.name`)" :rules="[
            {
          required: true,
          message: 'Please input email address',
          trigger: 'blur',
        },
          ]">
            <el-input
              v-model="scope.row.name"
              :placeholder="
                $t(`setting.icon.name`, { prefix: $t(`prefix.placeholder`) })
              "
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name" :label="$t(`setting.icon.type`)">
            <el-select-v2
              v-model="scope.row.name"
              :options="[]"
              multiple
              :placeholder="
                $t(`setting.icon.type`, { prefix: $t(`prefix.select`) })
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="code" :label="$t(`setting.icon.code`)">
            <el-input
              v-model="scope.row.code"
              :placeholder="
                $t(`setting.icon.code`, { prefix: $t(`prefix.placeholder`) })
              "
            >
              <template #prepend>
                <el-select-v2
                  style="width: 100px"
                  v-model="scope.row.source"
                  :options="[]"
                />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="code" :label="$t(`setting.icon.code`)">
            <svg-icon :size="80" :icon="scope.row.code" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-dialog-form-quote>

  <!-- 详情 -->
  <el-dialog-details-quote
    :dialogVisible="detailsVisible"
    :details-data="detailsData"
    @handleClose="handleDetailsClose"
  >
    <template #default="scope">
      <el-descriptions-item :label="$t(`setting.icon.name`)">{{
        scope.rows.name
      }}</el-descriptions-item>
      <el-descriptions-item :label="$t(`setting.icon.type`)">{{
        scope.rows.type
      }}</el-descriptions-item>
      <el-descriptions-item :label="$t(`setting.icon.source`)">{{
        scope.rows.source
      }}</el-descriptions-item>
      <el-descriptions-item :label="$t(`setting.icon.code`)">{{
        scope.rows.code
      }}</el-descriptions-item>
    </template>
  </el-dialog-details-quote>
</template>
<style lang="scss" scoped></style>
